<script setup>
import { ref } from 'vue';
import SelectDialog from './modules/SelectDialog.vue';

const tableData = ref([
  {
    info: '/src/assets/images/book.png',
    number: '100',
    price: '￥25.00',
    type: '1',
    section: '￥25.00',
    status: '待发货',
    time: '2023-11-11 12:00:00',
    id: '1'
  }
]);
</script>

<template>
  <div>
    <div class="Shelves-content">
      <div style="margin-bottom: 46px">
        <ElButton style="background: #165dff; color: #ffffff; margin-right: 46px">
          <img
            style="width: 12px; height: 12px; margin-right: 8px; border: none"
            src="@/assets/images/shelves/add.png"
            alt=""
          />
          新建产品
        </ElButton>
        <ElButton style="background: #f2f3f5; color: #1d2129; border: none; font-size: 14px">采集列表</ElButton>
      </div>
      <div class="saletable">
        <ElTable :data="tableData" style="width: 100%">
          <ElTableColumn prop="number" label="商品名称">
            <template #default="{ row }">
              <div style="width: 200px; height: 50px; display: flex">
                <div style="display: flex; align-items: center">
                  <img :src="row.info" alt="商品图片" style="width: 50px; height: 50px" />
                </div>
                <div style="margin-left: 12px; display: flex; align-items: center">
                  <div
                    style="
                      color: #606266;
                      font-size: 14px;
                      white-space: nowrap;
                      overflow: hidden;
                      text-overflow: ellipsis;
                      width: 126px;
                    "
                  >
                    智能无线蓝牙耳机 Pro11111
                  </div>
                </div>
              </div>
            </template>
          </ElTableColumn>
          <ElTableColumn prop="price" label="商品成本价" width="119">
            <template #header>
              <div style="display: flex; justify-content: center"><span>商品成本价</span></div>
            </template>
            <template #default="{ row }">
              <div class="df">{{ row.price }}</div>
            </template>
          </ElTableColumn>
          <ElTableColumn prop="info" label="商品状态" width="119">
            <template #header>
              <div style="display: flex; justify-content: center"><span>商品状态</span></div>
            </template>
            <template #default="{ row }">
              <ElSwitch v-model="row.type" class="df" />
            </template>
          </ElTableColumn>
          <ElTableColumn prop="type" label="审核状态" width="119">
            <template #header>
              <div class="df"><span>审核状态</span></div>
            </template>
            <template #default="{ row }">
              <div class="df">
                <div
                  class="df"
                  style="width: 54px; height: 24px; background-color: #f0f9eb; color: #67c23a; font-size: 12px"
                >
                  {{ row.status }}
                </div>
              </div>
            </template>
          </ElTableColumn>
          <ElTableColumn prop="number" label="库存" width="99">
            <template #header>
              <div style="display: flex; justify-content: center"><span>库存</span></div>
            </template>
            <template #default="{ row }">
              <div class="df">{{ row.number }}</div>
            </template>
          </ElTableColumn>
          <ElTableColumn prop="price" label="商品来源" width="119">
            <template #header>
              <div style="display: flex; justify-content: center"><span>商品来源</span></div>
            </template>
            <template #default="{ row }">
              <div class="df">
                <div
                  class="df"
                  style="width: 54px; height: 24px; background-color: #f0f9eb; color: #67c23a; font-size: 12px"
                >
                  {{ row.status }}
                </div>
              </div>
            </template>
          </ElTableColumn>

          <ElTableColumn prop="todo" label="操作" width="200">
            <template #header>
              <div style="display: flex; justify-content: center"><span>操作</span></div>
            </template>
            <template #default="{ row }">
              <div style="color: #409eff; width: 100%; justify-content: space-around; cursor: pointer" class="df">
                <span style="cursor: pointer" @click="handleEdit()">编辑</span>
                <span style="cursor: pointer" @click="handleEdit()">复制</span>
                <span style="cursor: pointer" @click="handleEdit()">下架</span>
              </div>
            </template>
          </ElTableColumn>
        </ElTable>
      </div>
      <div class="bottom">
        <ElPagination
          v-model:page-size="pageSize4"
          class="currentPage"
          :page-sizes="[100, 200, 300, 400]"
          layout="total, sizes, prev, pager, next"
          :total="400"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <SelectDialog></SelectDialog>
  </div>
</template>

<style lang="scss" scoped>
.home {
  width: 12px;
  height: 12px;
}

.df {
  display: flex;
  align-items: center;
  justify-content: center;
}

.settlement-nav {
  margin-bottom: 20px;
}

.Shelves-content {
  padding: 20px;
  background-color: white;
  height: 917px;

  .bottom {
    margin-top: 40px;
    display: flex;
    justify-content: flex-end;
  }
}
</style>

<style lang="scss">
.settlement-nav {
  .el-breadcrumb__inner {
    color: #1d2129 !important;
    font-size: 14px;
    font-family: '阿里妈妈方圆体 Alimama FangYuanTi VF';
    font-weight: 500;
  }

  .is-link {
    color: #4e5969 !important;
  }

  // .el-breadcrumb__item{
  //     color: #1D2129 ！important;
  // }
}

.Shelves-content {
  .el-table__cell {
    border: 1px solid #e5e7eb;
  }

  .el-table__inner-wrapper {
    border-left: 1px solid #e5e7eb;
    border-right: 1px solid #e5e7eb;
  }
}
</style>
